<template>
    <div class="footer">
        <div class="inner">
            <ul class='gsxx'>
                <li v-for='msg in footerMsg' :key='msg.code'>
                    {{msg.name}} ：{{msg.text}}
                </li>
            </ul>
            <div class="ewm">
              <ul>
                <li v-for='ewm in ewms' :key='ewm.code'>
                  <img :src='ewm.img'/>
                  <p>{{ewm.name}}</p>
                </li>
              </ul>
            </div>
            <ul class="gs">
              <li v-for='gs in gss' :key='gs.code'>
                <a :href='gs.url'>{{gs.name}}</a>
              </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Footer',
  data () {
    return {
      footerMsg: [
        {
          code: 'name',
          name: '版权所有',
          text: '深圳市昆特科技有限公司'
        },
        {
          code: 'address',
          name: '公司地址',
          text: '深圳市南山区龙珠大道珠光创新科技园3栋4层'
        },
        {
          code: 'email',
          name: '公司邮箱',
          text: 'kunt@kwantler.com'
        }
      ],
      ewms: [
        {
          code: 'sjwz',
          img: require('../assets/images/sjwz.png'),
          name: '官方网站'
        },
        {
          code: 'gfwx',
          img: require('../assets/images/gfwx.png'),
          name: '官方微信'
        }
      ],
      gss: [
        {
          name: '悦农通',
          url: 'http://www.yuenongtong.com',
          code: '01'
        },
        {
          name: '国家防汛抗旱总指挥部办公室',
          url: 'javascript:;',
          code: '02'
        },
        {
          name: '中国气象局',
          url: 'javascript:;',
          code: '03'
        },
        {
          name: '中国天气网',
          url: 'javascript:;',
          code: '04'
        },
        {
          name: '中国气象网',
          url: 'javascript:;',
          code: '05'
        },
        {
          name: '气象科普网',
          url: 'javascript:;',
          code: '06'
        },
        {
          name: '中国科协官网',
          url: 'javascript:;',
          code: '07'
        },
        {
          name: '保监会',
          url: 'javascript:;',
          code: '08'
        },
        {
          name: '中国再保险',
          url: 'javascript:;',
          code: '09'
        },
        {
          name: 'PICC',
          url: 'javascript:;',
          code: '10'
        },
        {
          name: '中国平安',
          url: 'javascript:;',
          code: '11'
        },
        {
          name: '中华联合',
          url: 'javascript:;',
          code: '12'
        },
        {
          name: '安华农业',
          url: 'javascript:;',
          code: '13'
        },
        {
          name: '基金业协会',
          url: 'javascript:;',
          code: '14'
        },
        {
          name: '红太阳',
          url: 'javascript:;',
          code: '15'
        },
        {
          name: '江苏气象信息共享平台',
          url: 'javascript:;',
          code: '16'
        },
        {
          name: '深圳气象共创平台',
          url: 'javascript:;',
          code: '17'
        },
        {
          name: '民太安保险经济公司',
          url: 'javascript:;',
          code: '18'
        },
        {
          name: '南海台风网',
          url: 'javascript:;',
          code: '19'
        },
        {
          name: '江苏昆特气象服务有限公司',
          url: 'javascript:;',
          code: '20'
        },
        {
          name: '江西昆特科技有限公司',
          url: 'javascript:;',
          code: '21'
        },
        {
          name: '辽宁昆特科技有限公司',
          url: 'javascript:;',
          code: '22'
        }
      ]
    }
  }
}
</script>
<style lang='less' scoped>
.footer{
  width: 100%;
  height: 426px;
  background: #4EBDD5;
  min-width: 1200px;
  .inner{
    position: relative;
    margin: 0 auto;
    width: 1200px;
    color: #ffffff;
    padding-top: 60px;
    .gsxx{
      li{
        line-height: 46px;
        font-size: 18px;
      }
    }
    .ewm{
      position: absolute;
      right: 0;
      top: 80px;
      overflow: hidden;
      li{
        float: left;
        width: 100px;
        margin-left: 50px;
        img{
          width: 100px;
          height: 100px;
        }
        p{
          font-size: 16px;
          text-align: center;
          line-height: 36px;
        }
      }
    }
    .gs{
      overflow: hidden;
      margin-top: 50px;
      li{
        float: left;
        line-height: 30px;
        margin-right: 44px;
        font-size: 16px;
        a{
          color: #ffffff;
        }
      }
    }
  }
}
</style>
